<template>
    <el-container>
        <el-header>
            <h2>图书入库</h2>
        </el-header>
        <el-main>
            读取RFID标签：{{ rfid }}
            <br>
            <el-popover placement="bottom" width="400" trigger="click">
                <div style="width: 400px;">
                    <div style="margin: 20px;">
                        RFID标签号：{{ rfid }}
                        <br>
                        图书id：<el-input placeholder="请输入图书id" v-model="input1"
                            style="width: 150px; padding-top: 10px;"></el-input>
                        <br>
                        图书名称：<el-input placeholder="请输入图书名称" v-model="input2"
                            style="width: 150px; padding-top: 10px;"></el-input>
                        <br>
                        图书位置：<el-input placeholder="请输入图书位置" v-model="input3"
                            style="width: 150px; padding-top: 10px;"></el-input>
                        <br>
                        <!-- 图书数量：<el-input placeholder="请输入图书数量" v-model="input4" 
                            style="width: 150px; padding-top: 10px;"></el-input>
                        <br> -->
                        <el-button type="primary" @click="submit">提交</el-button>
                        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
                    </div>
                </div>
                <el-button slot="reference">新增图书</el-button>
            </el-popover>
            <br>
            
        </el-main>
    </el-container>


</template>

<script>
const axios = require('axios');
import { websocket } from '@/utils/websocket';
var sendMeg;
var Meg;
export default {
    data() {
        return {
            inputbookid:"",
            rfid: "",
            input1: "",
            input2: "",
            input3: "",
            bookid:"",
            // input4:"",
        }
    },
    computed: {
    },
    watch: {//监听错误次数变化


    },
    created() {

        this.initWecSocket();
    },
    methods: {
        submit: function () {
            if (this.rfid == "") {
                alert("rfid不能为空");
            }
            if (this.input1 == "") {
                alert("图书id不能为空");
            }
            if (this.input2 == "") {
                alert("图书名称不能为空");
            }
            if (this.input3 == "") {
                alert("图书位置不能为空");
            }
            // if(this.input4 == ""){
            //     alert("图书数量不能为空");
            // }
            if (this.input1 != "" && this.input2 != "" && this.input3 != "")
                sendMeg = "booksave" + "rfid" + this.rfid + "bookid" + this.input1 + "bookname" + this.input2 + "booklocation" + this.input3 + "booknums1" + "Z";
            axios.get("http://localhost:8888/sendMessageToMyself/" + sendMeg);
        },
        initWecSocket: function () {
            // this.webSocket = new WebSocket("ws://localhost:8888//ws/WebSocket");
            this.webSocket = websocket;
            this.webSocket.onmessage = this.webSocketOnmessage;
            // this.webSocket.onerror = this.webSocketOnerror();
            //初始化完毕之后echarts显示数据信息
        },
        webSocketOnmessage: function (event) { //对接受的信息进行逻辑判断
            //    Meg=JSON.parse(event.data)
            Meg = event.data;
            console.log("收到硬件信息" + Meg);
            //根据收到的信息实时显示到页面
            if (event.data.substring(0, 6) == "HWRFID") {
                this.rfid = event.data.substring(6, event.data.length - 1)
            }
        },

    }

}
</script>